<template>
  <div id="search">
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item>
        <div class="search-item">
          <div class="search-input">
            <a-input
              v-decorator="['search']"
              :placeholder="placeholder[searchPageRouter]"
            >
              <a-icon slot="prefix" type="search" style="color:#FD7400" />
            </a-input>
          </div>
          <div class="cancel" @click="$router.go(-1)">
            取消
          </div>
        </div>
      </a-form-item>
    </a-form>
    <div class="recent">
      <h1>最近搜索：</h1>
      <div>
        <span
          class="tag"
          v-for="(item, index) in recent"
          :key="index"
          @click="$commonJs.goPage(searchPageRouter, null, item)"
          >{{ item }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {
      form: this.$form.createForm(this),
      placeholder: {
        personProject: "搜索项目名称",
        personContract: "搜索项目名称",
        personFriends: "搜索好友"
      },
      recent: []
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          if (values.search) {
            if (this.recent.length === 6) {
              this.recent.pop();
            }
            this.recent.unshift(values.search);
            localStorage.setItem(
              this.searchPageRouter,
              JSON.stringify(this.recent)
            );
            this.$commonJs.goPage(this.searchPageRouter, null, values.search);
          }
        }
      });
    }
  },
  computed: {
    searchPageRouter() {
      return this.$store.state.searchPageRouter;
    }
  },
  created() {
    let recent = localStorage.getItem(this.searchPageRouter);
    if (recent) {
      this.recent = JSON.parse(recent);
    }
  }
};
</script>

<style scoped lang="less">
#search {
  padding: 16px 41px;
  .ant-input-affix-wrapper .ant-input {
    border-radius: 30px;
  }
  .search-item {
    .flex_content();
    .search-input {
      .flex_one();
    }
    .cancel {
      font-size: 30px;
      line-height: 59px;
      margin-left: 24px;
    }
  }
  .recent {
    padding: 27px 39px;
    h1 {
      font-size: 30px;
      font-weight: bold;
    }
    .tag {
      display: inline-block;
      padding: 7px 30px;
      background: #e8e9eb;
      font-size: 25px;
      margin-right: 53px;
      margin-top: 27px;
      border-radius: 10px;
      &:before {
        content: "·";
        margin-right: 10px;
        font-weight: bolder;
      }
    }
  }
}
</style>
